{include file="$header" /}
<div class="mk-app-warp">
    <mk-table
        url="lang/index"
        save-url="lang/update"
        update-url="lang/update"
        delete-url="lang/delete"
        drop-url="lang/sort"
        row-key="name"
        @remove="remove($event)"
        @drop="drop($event)"
        @refresh="getData($event)"
        :date-search="false"
        :field="field"
        :scene="scene">
    </mk-table>
</div>
{include file="$component" /}
<script>
    var field = [
        {
            prop: 'cover', 
            label: '封面', 
            type: 'image',
            rules: {required: true}, 
            tips: '48*32是最佳像素',
            width: '60px'
        },
        {
            prop: 'title', 
            label: '名称', 
            placeholder: "请输入语言名称，例：中文",
            rules: {required: true}
        },
        {
            prop: 'name', 
            label: '缩写', 
            update: false,
            rules: {required: true, pattern: /^[A-Za-z0-9_\-]+$/ig, message: '只能为字母和数字，下划线_及破折号-'}
        },
        {
            prop: 'default', 
            label: '默认',  
            type: 'switch', 
            default: 0,
            refresh: true,
            width: '100px', 
        },
        {
            prop: 'status', 
            label: '状态',  
            type: 'switch', 
            default: 1,
            refresh: true,
            width: '100px', 
        },
        {
            prop: 'parameter', 
            label: '参数',  
            type: 'parameter', 
            default: [],
            table: false, 
        },
        {
            prop: 'isNews', 
            default: 1,
            form: false,
            table: false, 
        },
        {
            prop: 'sort', 
            default: 0,
            form: false,
            table: false, 
        },
    ];
    new Vue({
        el: '#app',
        data() {
            return {
                scene: [
                    {label: '基本信息', field: field.remove(['parameter'])},
                    {label: '语言参数', field: field.only(['parameter'])},
                ]
            }
        },
        methods: {
            /**
             * 数据加载回调
             */
            getData(p) {
                let arr = [];
                p.res.data.forEach(function(item, index) {
                    if (item.status === 1) {
                        arr.push(item);
                    }
                })
                parent.parentVm.langAllow = arr;
            },
            /**
             * 行删除、批量删除
             */
            remove(obj) {
                obj.self.$confirm('确定删除吗？', '', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.post("lang/delete", {rows: obj.rows}, function(res){
                        if (res.status === 'success') {
                            obj.self.getData();
                        } else {
                            obj.self.$message({ showClose: true, message: res.message, type: res.status});
                        }
                    });
                }).catch(() => {});
            },
            /**
             * 拖动排序
             */
            drop(obj) {
                let targetRow = obj.self.table.splice(obj.evt.oldIndex, 1)[0];
                obj.self.table.splice(obj.evt.newIndex, 0, targetRow);
                obj.self.table.forEach(function (item, index) {
                    return item.sort = obj.self.table.length - index;
                })
                request.post("lang/sort", {list: obj.self.table}, function(res){
                    if (res.status !== 'success') {
                        obj.self.$message({ showClose: true, message: res.message, type: res.status});
                    }
                });
            }
        },
    })
</script>
{include file="$footer" /}